<template>
  <div class="map-box">
    <div id="map"></div>
    <div style="padding:20px;text-align: left;font-size: 18px;">
    <div class="graph-select">
      <label for="selected">新增图形</label>
      <select name="selected" id="selected">
        <option value=""></option>
        <option value="Point">点</option>
        <option value="Line">线</option>
        <option value="Circle">圆形</option>
        <option value="Polygon">多边形</option>
        <option value="Rectangle">矩形</option>
      </select>
    </div>
      
    <div class="point">
      <span>点：</span>
      <button id="showPoint">显示点</button>
      <button id="hidePoint">隐藏点</button>
      <button id="removePoint">删除点</button>
    </div>
    <div class="line">
      <span>线：</span>
      <button id="showLine">显示线</button>
      <button id="hideLine">隐藏线</button>
      <button id="removeLine">删除线</button>
    </div>
    <div class="circle">
      <span>圆形：</span>
      <button id="showCircle">显示圆形</button>
      <button id="hideCircle">隐藏圆形</button>
      <button id="removeCircle">删除圆形</button>
    </div>
    <div class="polygon">
      <span>多边形：</span>
      <button id="showPolygon">显示多边形</button>
      <button id="hidePolygon">隐藏多边形</button>
      <button id="removePolygon">删除多边形</button>
    </div>
    <div class="rectangle">
      <span>矩形：</span>
      <button id="showRectangle">显示矩形</button>
      <button id="hideRectangle">隐藏矩形</button>
      <button id="removeRectangle">删除矩形</button>
    </div>
    <div class="edit">
      <button id="startEdit">开始编辑图形</button>
      <button id="endEdit">结束编辑图形</button>
    </div>
  </div>
  </div>
</template>
<script setup>
  import { onMounted } from 'vue'
  const loadScript = (url) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = url;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  const scripts = [
    'http://1.95.157.217/wmap/wmap.umd.js'
  ]
  async function loadScripts (scripts) {
    for (const url of scripts) {
      try {
        await loadScript(url);
      } catch (err) {
        console.error(`${url} failed:`, err);
      }
    }
  }
  onMounted(() => {
    loadScripts(scripts).then(() => {
      const map = new WMap.Map('map', {
        center: new WMap.LngLat(116.479662,39.996956),
        zoom: 15
      })
      map.on('click', (e) => {
        console.log(e.lngLat)
      })


      let point = new WMap.Point({
        center: new WMap.LngLat(116.479662,39.996956),
        extData: {'name': '点'}
      })
      map.add(point)
      point.on('click', (e) => {
        console.log(e.target.getExtData())
      })

      let line = new WMap.Line({
        map: map,
        path: [new WMap.LngLat(116.477648,39.997149),new WMap.LngLat(116.480078, 39.996506)],
        extData:{'name': '线'} 
      })
      line.on('click', (e) => {  
        console.log(e.target.getExtData())
      })

      let circle = new WMap.Circle({
        center: new WMap.LngLat(116.47614550262452, 39.99763225396728),
        radius: 81.7,
        extData:{'name': '圆'} 
      })
      map.add(circle)
      circle.on('click', (e) => {  
        console.log(e.target.getExtData())
      })

      let polygon = new WMap.Polygon({
        map: map,
        path: [new WMap.LngLat(116.47699844509125, 39.9982652552948), new WMap.LngLat(116.47721838623048, 39.997278202377316), new WMap.LngLat(116.47869360118867, 39.99738549073791), new WMap.LngLat(116.47857558399201, 39.9979058392868), new WMap.LngLat(116.47837710052491, 39.99842618783569)],
        extData: {'name': '多边形'}
      })
      polygon.on('click', (e) => {
        console.log(e.target.getExtData())
      })
      polygon.on('contextmenu', (e) => {
        console.log(e.target.getExtData())
      })

      let rectangle = new WMap.Rectangle({
        path: [new WMap.LngLat(116.48053896099091,39.99640916665649), new WMap.LngLat(116.48225557476044, 39.99715482076263)],
        extData: {'name': '矩形'}
      })
      map.add(rectangle)
      rectangle.on('click', (e) => {
        console.log(e.target.getExtData())
      })
      rectangle.on('contextmenu', () => {
        // e.target.hide()
      })
      // 主动绘制
      let graph = new WMap.VectorGraph(map)
      graph.on("done", (e) => {
        console.log(e, '绘制完')
      })
      let graphSelect = document.querySelector('#selected')
      graphSelect.onchange = () => {
        if (graphSelect.value === '') {
          graph.deactivate()
        } else {
          graph.activate(graphSelect.value)
        }
      }
      // 点
      let showPoint = document.querySelector('#showPoint')
      let hidePoint = document.querySelector('#hidePoint')
      let removePoint = document.querySelector('#removePoint')
      showPoint.onclick = () => {
        point.show()
      }
      hidePoint.onclick = () => {
        point.hide()
      }
      removePoint.onclick = () => {
        map.remove(point)
      }

      // 线
      let showLine = document.querySelector('#showLine')
      let hideLine = document.querySelector('#hideLine')
      let removeLine = document.querySelector('#removeLine')
      showLine.onclick = () => {
        line.show()
      }
      hideLine.onclick = () => {
        line.hide()
      }
      removeLine.onclick = () => {
        map.remove(line)
      }
      // 圆形
      let showCircle = document.querySelector('#showCircle')
      let hideCircle = document.querySelector('#hideCircle')
      let removeCircle = document.querySelector('#removeCircle')
      showCircle.onclick = () => {
        circle.show()
      }
      hideCircle.onclick = () => {
        circle.hide()
      }
      removeCircle.onclick = () => {
        map.remove(circle)
      }
      // 多边形
      let showPolygon = document.querySelector('#showPolygon')
      let hidePolygon = document.querySelector('#hidePolygon')
      let removePolygon = document.querySelector('#removePolygon')
      showPolygon.onclick = () => {
        polygon.show()
      }
      hidePolygon.onclick = () => {
        polygon.hide()
      }
      removePolygon.onclick = () => {
        map.remove(polygon)
      }
      // 矩形
      let showRectangle = document.querySelector('#showRectangle')
      let hideRectangle = document.querySelector('#hideRectangle')
      let removeRectangle = document.querySelector('#removeRectangle')
      showRectangle.onclick = () => {
        rectangle.show()
      }
      hideRectangle.onclick = () => {
        rectangle.hide()
      }
      removeRectangle.onclick = () => {
        map.remove(rectangle)
      }

      let startEdit = document.querySelector('#startEdit')
      let endEdit = document.querySelector('#endEdit')
      let edit = null
      startEdit.onclick = () => {
        edit = new WMap.GraphEdit(map)
        edit.open()
        edit.on('modifyend', (e) => {
          console.log(e)
        })
      }
      endEdit.onclick = () => {
        edit.close()
      }
    })
  })
</script>
<style>
.map-box{
  height: calc(100vh - 20px)
}
#map {
  height: calc(100% - 100px);
}
</style>
